<template>
    <div class="home">
        <el-table :data="UserList" border style="width: auto" v-bind:row-class-name="tableRowClassName">
            <el-table-column fixed prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="name" label="姓名" width="150"></el-table-column>
            <el-table-column prop="age" label="年龄" width="150"></el-table-column>
            <el-table-column prop="address" label="城市" width="150"></el-table-column>
            <el-table-column prop="bothday" label="生日" width="150"></el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>

export default {
    name: 'UserList',
    data() {
        return {
            UserList: []
        }
    },
    mounted() {
        this.axios.get('/api/user-lists').then(
            (response) => {
                this.UserList = response.data.data
            }
        )
    },
    methods: {
        handleClick(){

        },
        tableRowClassName({ row }) {
            if (row.age < 20) {
                return ".warning-row"
            }
        },
    }
}
</script>

<style scoped>
.warning-row {
    background: rgb(250, 216, 154);
  }
.success-row {
    background: #f0f9eb;
  }
</style>
